import React , { useState, useEffect } from 'react';
import { Layout, Menu, Breadcrumb, theme } from 'antd';
import { useLocation, Link, Outlet } from 'react-router-dom';
import UserManagement from './UserManagement';
import ProductEntry from './ProductEntry';

const { Sider, Content } = Layout;

const AdminPanel = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    
    const [breadcrumbContent, setBreadcrumbContent] = useState(['Home', 'User']);

    
    const location = useLocation();

    
    const updateBreadcrumb = () => {
        const path = location.pathname;
        switch (path) {
            case '/':
                setBreadcrumbContent(['Home', 'User']);
                break;
            case '/goods':
                setBreadcrumbContent(['Home', 'goods']);
                break;
            default:
                setBreadcrumbContent(['Home', 'User']);
        }
    };

    
    useEffect(() => {
        updateBreadcrumb();
    }, [location]);

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                    <Menu.Item key="1">
                        <Link to="/">用户管理</Link> {/* 使用固定路径 */}
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Link to="/goods">商品录入</Link> {/* 同上 */}
                    </Menu.Item>
                </Menu>
            </Sider>
            <Content>
                <Breadcrumb style={{ margin: '16px 24px' }}>
                    {breadcrumbContent.map((item, index) => (
                        <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>
                    ))}
                </Breadcrumb>
                <div
                    style={{
                        margin: 24,
                        minHeight: 360,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Outlet />
                </div>
            </Content>
        </Layout>
    );
};

export default AdminPanel;
